<template>
  <div>
    <!-- v-model如何应用于表单元素 -->
    <!-- 1. 输入框 -->
    <!-- v-model 等价于  value + @input -->
    <input type="text" v-model="msg1" />
    <input type="text" :value="msg2" @input="msg2 = $event.target.value" />

    <p></p>
    <!-- 2. 复选框 或 单选框 -->
    <!-- v-model 等价于 checked + @change -->
    <input type="checkbox" v-model="isChecked" />
    <input
      type="checkbox"
      :checked="isChecked2"
      @change="isChecked2 = $event.target.checked"
    />

    <p></p>
    <!-- 3. 下拉框 -->
    <!-- v-model 等价于 value + @change -->
    <select :value="cityId" @change="cityId = $event.target.value">
      <option value="101">北京</option>
      <option value="102">上海</option>
      <option value="103">广州</option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg1: "",
      msg2: "",
      isChecked: false,
      isChecked2: false,
      cityId: "101",
    };
  },
};
</script>

<style>
</style>